<template>
  <van-popup
    v-model:show="showPopup"
    position="center"
    round
    closeable
    @close="handleClose"
  >
    <div class="qr-code-container">
      <div class="qr-code-title">导出志愿表</div>
      <div class="qr-code">
        <VueQrcode
          :value="url"
          :margin="0"
          :width="340"
          :color="{ dark: '#000', light: '#fff' }"
          type="image/png"
        ></VueQrcode>
      </div>
      <div class="tips">
        <span>请使用手机扫一扫</span>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue';
import VueQrcode from 'vue-qrcode';

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  url: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['update:show']);

const showPopup = ref(props.show);

watch(
  () => props.show,
  (newVal) => {
    showPopup.value = newVal;
  }
);

const handleClose = () => {
  emit('update:show', false);
};

</script>

<style scoped lang="scss">
.qr-code-container {
  padding: 32px;
  width: 740px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #cbebff 0%, #ffffff 100%);
  .qr-code-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 24px;
  }
  .qr-code {
    padding: 32px;
    background-color: #fff;
    border-radius: 12px;
  }
  .tips {
    font-size: 20px;
    text-align: center;
  }
}
</style>
